<!--
 * @Descripttion: 数据集中抄录
 * @version: 
 * @Author: ye_zhiguo
 * @Date: 2021-08-19 08:59:18
 * @LastEditTime: 2021-08-23 08:36:17
-->
<template>
    <div id="dataFocuCopy">
        <!-- <van-nav-bar  title="集中抄录" left-arrow @click-left="back">
            <template #right>
                <div class="flex-box">
                    <img src="../../images/image118-rfid.png" class="title-icon">
                    <img src="../../images/vector.png" class="title-icon">
                </div>
            </template>
        </van-nav-bar> -->
        <div class="title-bg">
            <Theader title="集中抄录" :headerStyle="{color:'#333',backGroundColor: '#fff'}" :textStyle="{color:'#333'}"
                :titleStyle="{color:'#333'}">
                <template slot="header_arrow">
                    <van-icon size="17" name="arrow-left" @click="back" />
                </template>
                <template slot="header_icon">
                    <van-image width="1.2rem" height="1.2rem" :src="icon.rfid" @click="finishFileList" />
                    <van-image width="1.2rem" height="1.2rem" :src="icon.scan" @click="tourStatistics" />
                </template>
            </Theader>
        </div>
            <van-tabs v-model="activeName">
                <van-tab title="间隔单元" name="a"></van-tab>
                <van-tab title="设备类型" name="b"></van-tab>
            </van-tabs>
            <div class="padding-box">
                <van-row>
                    <van-col :span='6'>
                        <img src="../../images/image127-gray.png" class="icon-box">
                        <span>历史值</span>
                    </van-col>
                    <van-col :span='6'>
                        <img src="../../images/image127-yellow.png" class="icon-box">
                        <span>同步值</span>
                    </van-col>
                    <van-col :span='6'>
                        <img src="../../images/image127-green.png" class="icon-box">
                        <span>抄录值</span>
                    </van-col>
                    <van-col :span='6'>
                        <img src="../../images/image127-red.png" class="icon-box">
                        <span>异常值</span>
                    </van-col>
                </van-row>
            </div>
            <div class="out-main">
                <!-- 设备类型 -->
                <div class="in-main" v-show="activeName == 'b' ">
                    <van-collapse v-model="activeNamesType1" v-for="(item,i1) in deviceTypeList" :key="i1">
                        <van-collapse-item :title="item.deviceType" :name="i1">
                            <div class="test">
                                <van-collapse v-model="activeNamesType2" v-for="(item1,i2) in item.deviceList"
                                    :key="i2">
                                    <van-collapse-item :title="item1.deviceName" :name="i2">
                                        <div v-for="(item2,i3) in item1.copyChildList" :key="i3">
                                            <van-field v-model="item2.value" input-align="right">
                                                <div slot="label" class="flex-btw">
                                                    <span>{{item2.copyChildItem}}</span>
                                                    <img src="../../images/image128-trend.png" @click="showHistory"
                                                        class="icon-box">
                                                </div>
                                            </van-field>
                                        </div>
                                    </van-collapse-item>
                                </van-collapse>
                            </div>
                        </van-collapse-item>
                    </van-collapse>
                </div>

                <!-- 间隔单元 -->
                <div class="in-main" v-show="activeName == 'a' ">
                    <van-collapse v-model="activeNamesJg1" v-for="(item,i1) in deviceJgList" :key="i1">
                        <van-collapse-item :title="item.deviceJg" :name="i1">
                            <div class="test">
                                <van-collapse v-model="activeNamesJg2" v-for="(item1,i2) in item.deviceList" :key="i2">
                                    <van-collapse-item :title="item1.deviceName" :name="i2">
                                        <div v-for="(item2,i3) in item1.copyChildList" :key="i3">
                                            <van-field v-model="item2.value" input-align="right">
                                                <div slot="label" class="flex-btw">
                                                    <span>{{item2.copyChildItem}}</span>
                                                    <img src="../../images/image128-trend.png" @click="showHistory"
                                                        class="icon-box">
                                                </div>
                                            </van-field>
                                        </div>
                                    </van-collapse-item>
                                </van-collapse>
                            </div>
                        </van-collapse-item>
                    </van-collapse>
                </div>
            </div>
            <div class="footer-box">
                <button class="confirm-btn">保存</button>
            </div>
            <div class="suspension">
                <button @click="syncData">同步数据</button>
            </div>
            <van-popup v-model="historyShow" closeable close-icon-position="top-right">
                <div class="popup-title">
                    <span>历史值趋势图</span>
                </div>
                <div id="myChart" :style="{width: '350px', height: '300px'}"></div>
            </van-popup>
        </div>
</template>

<script>
    import Theader from "../component/header"
    export default {
      components: {
        Theader
      },
        data() {
            return {
                icon: {
                    rfid: require('../../images/formTable.png'),
                    scan: require('../../images/data.png'),
                    add: require('../../../../assets/img/mainIndex/add.png'),
                    time: require("@assets/img/mainIndex/time.png"),
                },
                historyShow: false,
                activeName: 'b',
                activeNamesJg1: [''],
                activeNamesJg2: [''],
                activeNamesType1: [''],
                activeNamesType2: [''],
                deviceTypeList: [{
                    deviceType: '主变压器',
                    deviceList: [{
                        deviceName: '1#主变',
                        copyChildList: [{
                            copyChildItem: '油面温度表1(本体)',
                            value: '48',
                        }, {
                            copyChildItem: '油面温度表2(本体)',
                            value: '48',
                        }, {
                            copyChildItem: '油面温度表3(本体)',
                            value: '48',
                        }, {
                            copyChildItem: '绕组温度表(本体)',
                            value: '48',
                        }, {
                            copyChildItem: '油位指示(本体)',
                            value: '48',
                        }]
                    }, {
                        deviceName: '2#主变',
                    }]
                }],
                deviceJgList: [{
                    deviceJg: '1#主变压器单元',
                    deviceList: [{
                        deviceName: '1101c相电流互感器',
                        copyChildList: [{
                            copyChildItem: '油面温度表1(本体)',
                            value: '48',
                        }, {
                            copyChildItem: '油面温度表2(本体)',
                            value: '48',
                        }, {
                            copyChildItem: '油面温度表3(本体)',
                            value: '48',
                        }, {
                            copyChildItem: '绕组温度表(本体)',
                            value: '48',
                        }, {
                            copyChildItem: '油位指示(本体)',
                            value: '48',
                        }]
                    }, {
                        deviceName: '1101断路器',
                    }
                    ]
                }
                    , {
                    deviceJg: '2#主变压器单元',

                }, {
                    deviceJg: '3#主变压器单元',

                }, {
                    deviceJg: '4#主变压器单元',

                }],
            }
        },
        mounted() {
            // this.drawLine();
        },
        methods: {
            /**
             * @description: 返回
             */
            back() {
                this.$router.go(-1)
            },
            /**
             * @description: 同步数据
             */
            syncData() {
                this.$toast('数据同步成功');
            },
            /**
             * @description: 展示历史数据
             */
            showHistory() {
                this.historyShow = true
                // setInterval(()=>{
                //     this.drawLine()},500)
                this.$nextTick(() => {
                    this.drawLine()
                })
            },
            drawLine() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('myChart'))
                // 绘制图表
                myChart.setOption({
                    tooltip: {},
                    xAxis: {
                        type: 'category',
                        data: ['4/1', '4/3', '4/5', '4/7', '4/9'],
                    },
                    yAxis: {
                        type: 'value',
                        min: 0,
                        max: 25,
                        // minTnterval:0,
                        // logBase:5
                    },
                    series: [{
                        data: [5, 10, 12, 12, 10],
                        type: 'line',
                        smooth: true,
                        itemStyle: {
                            normal: {
                                color: 'rgb(255,159,65)', //折点颜色
                                lineStyle: { color: 'rgb(255,159,65)' }, //折线颜色
                                label: { show: true }
                            }
                        }
                    }]
                });
            }
        }
    }
</script>

<style>
    .title-bg {
        height: 50px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
    }
    #dataFocuCopy .title-icon {
        height: 1.0625rem;
        width: 1.0625rem;
    }

    #dataFocuCopy .icon-box {
        height: 0.9375rem;
        width: 0.9375rem;
    }

    #dataFocuCopy .flex-box {
        display: flex;
        justify-content: space-around;
        width: 3rem;
    }

    #dataFocuCopy .out-main {
        height: calc(100vh - 14rem);
        padding: 10px;
        background-color: #F5F6F7;
    }

    #dataFocuCopy .in-main {
        padding: 10px;
        background-color: #fff;
        margin-bottom: 10px;
        border-radius: 5px;
        max-height: calc(100% - 20px);
        overflow: auto;
    }

    #dataFocuCopy .footer-box {
        height: 3rem;
        background: #fff;
        padding: 0.5rem;
    }

    #dataFocuCopy .footer-box .confirm-btn {
        height: 100%;
        width: 100%;
        background: #0EB295;
        border-radius: 5px;
        border: #0EB295;
        color: #fff;
        font-size: 1.25rem;
    }

    #dataFocuCopy .padding-box {
        background-color: #F5F6F7;
        padding: 10px;
        padding-bottom: 0;
    }

    #dataFocuCopy .van-row {
        background: #fff;
        line-height: 40px;
        border-radius: 5px;
    }

    #dataFocuCopy .suspension {
        position: absolute;
        top: calc(80% - 2rem);
        right: 10px;
        height: 4rem;
        width: 4rem;
    }

    #dataFocuCopy .suspension button {
        border-radius: 100%;
        background: #0EB295;
        border: #0EB295;
        padding: 10px;
        color: #fff;
    }

    #dataFocuCopy .van-field__label {
        min-width: 60%;
    }

    #dataFocuCopy .flex-btw {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 500;
    }

    #dataFocuCopy .van-cell__title {
        font-size: 0.9375rem;
        font-weight: bold;
    }

    #dataFocuCopy .van-field__control {
        width: 100%;
        border: 1px solid #ccc;
        border-bottom: 0;
        border-radius: 5px;
        text-align: center;
    }

    #dataFocuCopy .van-field__body {
        padding-left: 50%;
    }

    #dataFocuCopy .test .van-cell--clickable {
        border: 1px solid #ccc;
        border-radius: 5px;
        border-left: 0.5rem solid #0EB295;
    }

    #dataFocuCopy .test .van-collapse {
        border: 1px solid #ccc;
        border-radius: 5px;
        margin-bottom: 10px;
        border-top: 0;
    }

    #dataFocuCopy .popup-title {
        height: 3rem;
        /* width: 100%; */
        font-size: 1.0625rem;
        display: flex;
        align-items: center;
        justify-content: space-around;

    }
</style>